<template>
	<view>
		<view class="top-img">
			<image src="/../static/images/jiudian.jpg" mode="widthFix"></image>
			<!-- <u-swiper indicator-pos="topRight" :list="swiperlist" border-radius="0" height="380"></u-swiper> -->
		</view>
		<div style="clear:both;"></div>
		<view class="subject">
			<view class="subject-view">
		<view class="hotel-text">
			 	<view class="text-title">搜索</view>
			 	 <view class="hotel-inp">
					 <input placeholder="关键字/位置/品牌/酒店名"/>
				 </view>
			 </view>
			<view class="hotel-text">
			 	<view class="text-title">价格区间</view>
			 	 <view class="hotel-inp">
			 		  <input type="number" v-model="minPrice" placeholder="0" /> -
			 		  <input type="number" v-model="maxPrice" placeholder="0" />
			 	</view>
			 </view>
			
			 <view class="hotel-btn">
				 <button class="hotel-btns" @click="lists">搜索</button>
			 </view>
			</view>
		</view>
		
		<!--条件渲染  -->
		<view>
			<div v-if="showElement">
				<view class="container">
				  <view
				    class="cont-box"
				    :style="{ '--layout-width': 100 / flowData.column - flowData.columnSpace + '%' }"
				    v-for="(numVal, index) in flowData.column"
				    :key="numVal"
				  >
				    <view class="item-box" v-for="(item, j) in flowData[`column_${index + 1}`]" :key="j">
				      <image class="img-tip" :src="item.imgUrl" mode="widthFix" lazy-load />
				      <view class="tit-tip multi-line-omit">{{ item.title }}</view>
				      <view class="desc-tip multi-line-omit">{{ item.desc }}</view>
				    </view>
				  </view>
				</view>
			</div>
			<div v-else>
				<!-- 根据选择输入的价格区间来渲染出符合条件的住宿 -->
		    <view v-for="item in filteredProducts" :key="item.id">
		      {{ item.name }} - 价格：{{ item.price }}
		    </view>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 flowData: {
				   list: [], // 数据值
				   column: 2, // 瀑布列数
				   columnSpace: 2 // 瀑布列宽间距
				 },
				
				showElement: true ,// 控制元素是否显示的变量
				products: [
				        { id: 1, image:'../../static/images/jiudian.jpg', name: '商品1', price: 50 },
				        { id: 2, image:'../../static/images/jiudian.jpg', name: '商品2', price: 80 },
				        { id: 3, image:'../../static/images/jiudian.jpg', name: '商品3', price: 120 },
				        // 更多商品数据（图片等等）
				      ],
				      minPrice: '',
				      maxPrice: '',
				show: false,
				mode: 'range',
				startDate:"2月2日",
				endDate:"2月3日",
				nights:1
			}
		},
		created() {
		  /* 初始化每一列的数据 */
		  for (let i = 1; i <= this.flowData.column; i++) {
		    this.$set(this.flowData, `column_${i}`, []);
		  }
		},
		
		onLoad() {
			/* 数据赋值 */
			this.flowData.list = [
			  {
			    imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045108_thumb.jpg",
			    title: "张老师独家日暮酒店11111",
			    desc: "分析自动驾驶汽车对未来交通和城市规划的潜在影响，探讨相关挑战。"
			  },
			  {
			    imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044581_thumb.jpg",
			    title: "张老师独家陋巷酒店11111",
			    desc: "分析建设可持续城市的战略和实际方法，强调环保、资源利用和城市规划的重要性。"
			  },
			  {
			    imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045190_thumb.jpg",
			    title: "酒店11111",
			    desc: "探讨在全球范围内消灭传染病的挑战，突出卫生领域的创新方法。"
			  },
			  {
			    imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044667_thumb.jpg",
			    title: "张老师独家森林酒店11111",
			    desc: "探讨人工智能和机器学习如何在多个领域引发革命性变革，从工业到医疗，对未来产生深远影响。"
			  },
			  {
			    imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044562_thumb.jpg",
			    title: "生命科学的新前沿：基因编辑和生物技术的伦理挑战",
			    desc: "研究生命科学领域的最新发展，聚焦基因编辑和生物技术的伦理考量，探讨科技前沿的道德挑战。"
			  },
			  {
			    imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045057_thumb.jpg",
			    title: "加密货币与区块链：重塑全球金融体系的力量",
			    desc: "解析加密货币和区块链技术对金融体系的颠覆作用，重新定义了全球金融交易方式。"
			  },
			  {
			    imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044716_thumb.jpg",
			    title: "量子计算与量子技术应用的前沿探索",
			    desc: "深入研究量子计算和量子技术的前沿，展示这一领域的创新及其应用前景。"
			  },
			  {
			    imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044779_thumb.jpg",
			    title: "气候变化缓解的复杂性：全球视角下的挑战与机遇",
			    desc: "探讨应对气候变化的复杂性，强调全球合作，突出应对挑战所蕴含的机遇。"
			  },
			  {
			    imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044956_thumb.jpg",
			    title: "虚拟现实与医疗保健的交汇：革命性地改变患者护理",
			    desc: "介绍虚拟现实技术如何在医疗领域革命性地改善患者护理和治疗方法。"
			  },
			  {
			    imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044607_thumb.jpg",
			    title: "生物工程的突破：改变医学和人类增强的科技",
			    desc: "研究生物工程领域的创新，关注其在医学和人类增强领域的重要作用。"
			  },
			  {
			    imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045083_thumb.jpg",
			    title: "社交媒体的演进及其对沟通和社会的影响",
			    desc: "追溯社交媒体的发展历程，探讨其对人际沟通和社会动态的广泛影响。"
			  },
			  {
			    imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044643_thumb.jpg",
			    title: "元宇宙时代：在工作、教育和娱乐的虚拟世界中导航",
			    desc: "介绍元宇宙时代，强调虚拟世界在工作、教育和娱乐中的多样应用。"
			  },
			  {
			    imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044936_thumb.jpg",
			    title: "通用人工智能：人类是否准备好面对超智能机器？",
			    desc: "研究通用人工智能的发展，引发思考人类面对超级智能机器的准备程度。"
			  },
			  {
			    imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045159_thumb.jpg",
			    title: "超越火星：人类太空探索和星际旅行的未来",
			    desc: "展望人类在太空探索领域的未来，探讨星际旅行的潜力和挑战。"
			  }
			];
			this.$nextTick(() => {
			  this.initData(); // 数据初始化
			});
		},
		computed: {
		    filteredProducts() {
		      return this.products.filter(item => {
		        const price = item.price;
		        return price >= this.minPrice && price <= this.maxPrice;
		      });
		    }
		  },
		methods: {
			/* 数据初始化 */
			initData() {
			  const groupList = this.dynamicGrouping(this.flowData.list, this.flowData.column); // 数据动态分组
			  groupList.forEach((item, i) => (this.flowData[`column_${i + 1}`] = item));
			},
			/** 数据动态分组
			 * @param {Object} data 分组的数据列表
			 * @param {Object} i 需要分几组
			 * @returns {Array} groups 已分组的数据
			 */
			dynamicGrouping(data, i) {
			  if (i <= 0) return "分组数必须大于0";
			  const groups = [];
			  for (let j = 0; j < i; j++) {
			    groups.push([]);
			  }
			  for (let k = 0; k < data.length; k++) {
			    const groupIndex = k % i;
			    groups[groupIndex].push(data[k]);
			  }
			  return groups;
			},
			
			onTab(type){
				if(type!==this.countrytyle){
					this.countrytyle = type
				}
			},
			lists(){
				this.showElement =!this.showElement; // 切换 showElement 的值
			},
			change(e) {
				//获取时间值
				if(e.startMonth==e.endMonth){
					this.nights = e.endDay - e.startDay
				}
				this.startDate = e.startMonth+'月'+e.startDay+'日'
				this.endDate = e.endMonth+'月'+e.endDay+'日'
			},
		},
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.container {
	  display: flex;
	  justify-content: space-between;
	  padding: 20rpx;
	  $borderRadius: 12rpx;
	  .cont-box {
	    width: var(--layout-width);
	    .item-box {
	      width: 100%;
	      padding-bottom: 20rpx;
	      margin-bottom: 30rpx;
	      border-radius: $borderRadius;
	      box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.08);
	      .img-tip {
	        width: 100%;
	        border-radius: $borderRadius $borderRadius 0 0;
	      }
	      .tit-tip {
	        text-align: justify;
	        font-size: 30rpx;
	        padding: 10rpx 20rpx 0;
	        font-weight: 900;
	      }
	      .desc-tip {
	        text-align: justify;
	        font-size: 26rpx;
	        padding: 5rpx 20rpx 0;
	        margin-top: 10rpx;
	      }
	    }
	  }
	}
	/* 多行省略 */
	.multi-line-omit {
	  word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
	  text-overflow: ellipsis; // 溢出用省略号显示
	  overflow: hidden; // 超出的文本隐藏
	  display: -webkit-box; // 作为弹性伸缩盒子模型显示
	  -webkit-line-clamp: 2; // 显示的行
	  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
	}
	/* 单行省略 */
	.one-line-omit {
	  width: 100%; // 宽度100%：1vw等于视口宽度的1%；1vh等于视口高度的1%
	  white-space: nowrap; // 溢出不换行
	  overflow: hidden; // 超出的文本隐藏
	  text-overflow: ellipsis; // 溢出用省略号显示
	}
	  
	.title{
		color: #d2bb9b;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
	.top-img{
		position: relative;
		image{
			width: 100%;
			height: 180px;
		}
	}
	.subject-view{
		border-radius: 5px;
		overflow: auto;
		zoom: 1;
		// background-color: #fff;
	}
	.subject{
		position: absolute;
		top: 110px;
		width: 95%;
		margin: 0px 10px;
		.subject-tab{
			overflow: auto;
			zoom: 1;
			view{
				height: 45px;
				width: 33.3%;
				float: left;
				text-align: center;
				line-height: 45px;
				font-size: 15px;
				background-color: #f1f1f1;
				font-weight: bold;
			}
			.subject-tabs{
				background-color: #fff;
				color: #d2bb9b;
			}
		}
	}
	.horse{
		padding: 5px 10px;
		background-color: #fff;
	}
	.type-tab{
		overflow: auto;
		zoom: 1;
		background-color: #fff;
		padding: 5px 20px;
		view{
			float: left;
			height: 25px;
			margin-right: 50px;
			font-size: 15px;
			font-weight: 700;
		}
		.type-tabs{
			border-bottom: 1.5px solid #d2bb9b;
			color: #d2bb9b;
		}
	}
	.hotel-text{
		padding: 10px 20px 5px 20px;
		background-color: #fff;
		.text-title{
			color: #929292;
			font-size: 14px;
		}
		.text-data{
			padding: 7px 0px;
			overflow: auto;
			zoom: 1;
			border-bottom: 1px solid #f1f1f1;
			.text-data-one{
				font-size: 17px;
				font-weight: bold;
				float: left;
			}
			.text-data-two{
				color: #929292;
				font-size: 14px;
				float: right
			}
		}
		.hotel-inp{
			padding: 7px 0px;	
			border-bottom: 1px solid #f1f1f1;
			display: flex;
			   justify-content: space-between;
		}
	}
	.hotel-btn{
		padding: 10px 20px;
		background-color: #fff;
		.hotel-btns{
			background-color: #d2bb9b;
			height: 40px;
			line-height: 40px;
			color: #fff;
			border-radius: 30px;
			font-size: 15px;
		}
	}
	.u-btn--primary{
		background-color: #d2bb9b!important;
	}
</style>
